import { getMyMenuList } from '@/api/system'
import { asyncRoutes, constantRoutes } from '@/router'
import Layout from '@/layout/index.vue'
import { menuList } from '@/utils/const'

/**
 * Filter asynchronous routing tables by recursion
 * @param asyncRoutes 动态路由
 * @param permissionList  菜单权限
 */
function filterAsyncRoutes(asyncRoutes, permissionList) {
  const menuList = []
  permissionList.map((permissionItem, index) => {
    const menuItem = {
      path: `/noRedirect${index}`,
      component: Layout,
      redirect: 'noRedirect',
      meta: {
        title: permissionItem.title,
        icon: permissionItem.icon
      },
      children: filterChildrenRoutes(asyncRoutes, permissionItem.children || [])
    }
    menuList.push(menuItem)
  })
  return menuList
}

/**
 * Filter asynchronous routing tables by recursion
 * @param asyncRoutes 动态路由
 * @param childrenPermissionList  二级权限
 */

function filterChildrenRoutes(asyncRoutes, childrenPermissionList = []) {
  const subMenuList = []
  childrenPermissionList.forEach((permissionItem) => {
    asyncRoutes.forEach((routeItem) => {
      if (permissionItem.path === routeItem.path) {
        routeItem.meta.title = permissionItem.title
        // router-view挂载，不用在pages对应模块创建一个index.vue写一个空的 route-view 了
        if (!routeItem.component) {
          routeItem.component = function component() {
            return import('@/layout/router-view.vue')
          }
        }
        routeItem.meta.btnPermission = filterBtnPermission(permissionItem)
        if (routeItem?.children?.length) {
          // 子页面页面权限挂载 - 子菜单挂载父菜单权限
          const path = routeItem.path
          routeItem.children.map((childrenItem) => {
            if (!childrenItem.meta) {
              childrenItem.meta = {}
            }
            childrenItem.meta.activeMenu = path // 归属于哪个父菜单
            childrenItem.meta.btnPermission = filterBtnPermission(permissionItem)
          })
        }
        if (permissionItem?.children?.length) {
          filterChildrenRoutes(asyncRoutes, permissionItem.children || [])
        }
        subMenuList.push(routeItem)
      }
    })
  })
  return subMenuList
}

/**
 * Filter asynchronous routing tables by recursion
 * @param btnPermission 按钮权限
 * 按钮权限
 */
export function filterBtnPermission(btnPermission) {
  const btnPermissionList = []
  // btnPermission.map(item => {
  //   btnPermissionList.push(item.permission)
  // })
  return btnPermissionList
}

const state = {
  routes: [],
  permissionRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.permissionRoutes = routes
    state.routes = [...constantRoutes, ...routes]
  }
}

const actions = {
  // 获取菜单权限
  getMenuList({ commit }) {
    return new Promise((resolve, reject) => {
      getMyMenuList().then(res => {
        // todo 上线替换接口菜单权限数据
        // const menuList = res || []
        resolve(menuList)
      }).catch(error => {
        reject(error)
      })
    })
  },

  generateRoutes({ commit }, menuList) {
    return new Promise(resolve => {
      const accessedRoutes = filterAsyncRoutes(asyncRoutes, menuList)
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  },

  removeMenuList({ commit }) {
    commit('SET_ROUTES', [])
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
